<template>
  <div>
    <countCenterRigHeader>
      <div class="back" @click="backMyPro">< 返回我的资产</div>
    </countCenterRigHeader>
    <div class="bank">
      <form action="" class="formInputBank">
        <div>
          <input type="text" placeholder="请输入将要转移的邮箱" v-model="form.email" @input="writeInfo('email')">
        </div>
        <div>
          <input type="text" placeholder="请输入手机号" v-model="form.phone" @input="writeInfo('phone')">
        </div>
        <div class="codeInputBank">
          <input type="text" placeholder="输入验证码" v-model="form.code" @input="writeInfo('code')">
          <span style="float: right;" class="codeButton">
              <el-button type="primary" :disabled="form.codeDis" @click="getCode">{{sendSureCode}}</el-button>
            </span>
        </div>
        <div class="submitBank">
          <el-button type="primary" :disabled="form.subDis" @click="transfere">转移</el-button>
        </div>
      </form>
    </div>
  </div>
</template>
<script>
  import countCenterRigHeader from '../common/countCenterRigHeader.vue';
  export default{
    data(){
      return {
        coin_id:'',
        form:{
          email:'',
          phone:'',
          code:'',
          codeDis:true,
          subDis:true,
        },
        sendSureCode:'获取验证码',
        timer:'',
      }
    },
    methods:{
      backMyPro(){
        this.$router.push({name:'countCenter'})
      },
      transfere(){
        var that = this;
        that.form.subDis = true;
        this.interFace('zhuan_bi',{
          currency_id:this.coin_id,
          email:this.form.email,
          code:this.form.code,
          phone:this.form.phone
        }).then(function(res){
          that.form.subDis = false;
          if(res.type !=1){
            that.$notify.error({
              title: res.body,
            });
          }else{
            that.$notify({
              title: '成功',
              message:res.body,
              type: 'success'
            });
            that.$router.push({name:'countCenter'});
          }
        })
      },
      getCode(){
        var that = this;
        this.form.codeDis = true;
        this.interFace('code_member_back_card',{
          phone:this.form.phone
        }).then(function(res){
          if(!res.body){
            that.sendSureCode = 60;
            that.timer = setInterval(function(){
              that.sendSureCode--;
              if(that.sendSureCode == -1){
                clearTimeout(that.timer);
                that.sendSureCode = '发送验证码';
                that.form.codeDis = false;
              }
            },1000);
            that.$notify({
              title: '手机验证码发送成功',
              type: 'success'
            });
          }else{
            that.$notify.error({
              title: res.body,
            });
            that.form.codeDis = false;
          }
        })
      },
      reg(){
        if(this.regex().email.test(this.form.email) && this.regex().phoneReg.test(this.form.phone) && this.regex().code.test(this.form.code)){
          this.form.subDis = false;
        }else{
          this.form.subDis = true;
        }
      },
      writeInfo(type){
        switch(type)
        {
          case 'phone':
            if(this.regex().phoneReg.test(this.form.phone)){
              this.form.codeDis = false;
            }else{
              this.form.codeDis = true;
            }
            break;
        }
        this.reg();
      }
    },
    components: {
      countCenterRigHeader
    },
    created(){
      this.coin_id = this.$route.params.id
    }
  }
</script>
<style>
  .back{
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
  }
  .bank{
    margin:29px 30px 86px;
    color: #FFFFFF;
  }
  .formInputBank>div{
    width:300px;
    margin-top: 30px;
    height: 38px;
  }
  .formInputBank >div >input{
    width:100%;
    height: 100%;
    padding-left: 10px;
    border-radius: 3px;
    border: none;
    outline: none;
    box-sizing: border-box;
  }
  .formInputBank button{
    width:100%;
    height: 38px;
  }
  .codeInputBank input{
    width:170px!important;
  }
  .codeInputBank{
    margin-bottom: 30px;
  }
  .bankListStyle li{
    padding: 10px;
    border: 1px solid #6C6863;
    border-bottom: none;
  }
  .bankListStyle li:nth-last-of-type(1){
    border-bottom: 1px solid #6C6863;
  }
  .ulListBank{
    display: inline-block;
    width: 55%;
    text-align: right;
  }
  .ulListBank button{
    width:100px;
    height: 30px;
    padding:0;
  }
  .bank .dialog-footer button{
    width: 100px;
  }
  .addBank{
    width:200px;
    height: 40px;
    margin:0 auto;
    margin-top: 30px;
  }
  .addBank button{
    width:100%;
    height: 100%;
    padding:0;
  }
  .codeButton button{
    width:112px;
  }
  .bank .el-button--primary.is-disabled, .el-button--primary.is-disabled:active, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:hover{
    color: #999999;
    background: #4E4C4A;
    border-color:#4E4C4A;
  }
</style>
